<template>
	<view v-if="images" class="note_detail">
		<!-- <image mode="widthFix" style="background-color: #eeeeee;" :src="note.author.p || note.author.user_photo"></image> -->
		<view class="thumb">
			<div v-if="note.video_url"  style="background: rgb(41, 41, 43)">
				<video :src="note.video_url" style="height: 43vh;width:100%" ></video>
			</div>
			
			<uni-swiper-dot v-else :info="images" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change" style="height:45vh">
					<swiper-item v-for="(image ,index) in images" :key="index" >
						<image mode="aspectFill" style="width: 100%;height:45vh" :src="image.img"></image>
						<!-- <view class="swiper-item">
							<view class="img" :style="{backgroundImage:'url('+image.img+')'}"></view>
						</view> -->
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="content">
			<ListsTop :list="note.author"/>
			<view v-if="note.title">
				<view style="font-size: 16px;font-weight: 600;">{{note.title}}</view>
				<view style="margin-top:10px;font-weight: normal;font-size: 15px" v-if="note.contents[0]">{{note.contents[0].c}}</view>
			</view>
			<rich-text :nodes="text" v-else  class="text"></rich-text>
			<text class="like" v-if="note.like_count">{{note.like_count}}次赞</text>
			<text class="like" v-if="note.favo_count">{{note.favo_count}}次收藏</text>
		</view>
		
		<view class="com" v-if="comments.length">
			 <view>
				 <view class="hot_com">笔记评论</view>
			 </view>
			 <Comment 
				v-for="(comment,index) in comments" 
				:key="index"
				:author="comment.u.id"
				:comment="comment"
			/>
		</view>
		<view class="xiangguan">
			<view class="xg_com">- 相关笔记 -</view>
			<view>
			        <SearchCard v-for="(item,index) in relate" :key="index" :item="item"/>
			          
			        </SearchCard>
			    </view>
		</view>
		<!-- <text v-html="text" class="text" v-if="text"></text> -->
	</view>
</template>

<script>
	import Comment from "@/components/Comment/Comment.vue"
	import ListsTop from '@/components/ListsTop/ListsTop.vue'
	import SearchCard from '@/components/SearchCard/SearchCard.vue'
	export default {
		components: {
			ListsTop,
			Comment,
			SearchCard
		},
		data() {
			return {
				note: null,
				text: null,
				images: null,
				current: 0,
				mode: 'nav',
				comments:[],
				relate: null,
			};
		},
		methods: {
		        change(e) {
		            this.current = e.detail.current;
		        },
		    },
		onLoad: function (option) {
			uni.showLoading({
				title: '加载中'
			});
			uni.request({
				url: "https://apis.netstart.cn/douguo/note/detail/"+option.id,
				success: (res) => {
						uni.hideLoading();
						this.note = res.data.result.note;
						this.comments = this.note.cs;
						this.images = this.note.images.map(function(item){
							return{
								img :item.u,
								content: ""
							}
						});
						
						if(this.note.contents[0]){
							this.text = this.note.contents[0].c.replaceAll("\n","<br/>");
							this.text = this.text.replaceAll(" ","&nbsp;");
							this.text = `<p style="font-size: 16px;font-weight: 600;">${this.text}`;
							this.text = this.text.replace("<br/>", "</p><br/>")
						}
				    }
			});
			uni.request({
				url: "https://apis.netstart.cn/douguo/note/related/"+ option.id +'/'+ 0 +'/'+20,
				success: (res) => {
						this.relate = res.data.result.list;
				    }
			});
		}
	}
</script>

<style lang="less">
.note_detail{
	.thumb{
		video{
			vertical-align: bottom;
		}
	}
	.com{
		.hot_com{
			text-align: center;
			font-size: 18px;
			font-weight: 600;
			margin-top: 30px;
			margin-bottom: 30px;
		}
	}
	.xiangguan{
		.xg_com{
			text-align: center;
			font-size: 18px;
			font-weight: 600;
			margin-top: 30px;
			margin-bottom: 30px;
		}
	}
	.content{
		padding: 15px;
		.text{
			font-size: 15px;
			// padding: 20px 15px 0 15px;
		}
		.like{
			font-size: 12px;
			float: right;
			margin-top: 10px;
			margin-right: 5px;
			color: #747474;
		}
	}
	.uni-swiper__warp{
		height: auto;
		.uni-swiper__dots-nav{
			background-color: rgba(0, 0, 0, 0);
			justify-content: flex-end;
		}
		uni-swiper{
			height: 50vh;
			.img{
				height: 50vh;
				background-size: cover;
				background-position: center;
			}
		}
	}
}
</style>
